import { STable } from "@cnjingx/antd-components";
import { useEffect, useState } from "react";
import { fetchLoginLogList } from "@/api/modules/log.js";
import { Form } from "antd";
import { useRequest } from "@/hooks/useRequest.js";

export function Component() {
  const [form] = Form.useForm();
  const [dataSource, setDataSource] = useState([]);
  const [total, setTotal] = useState();
  const [pageNum, setPageNum] = useState(1);

  const { run: loadLogList, loading } = useRequest(
    (pageNum, query = {}) => {
      return fetchLoginLogList({
        pageSize: 30,
        pageNum,
        ...query,
      });
    },
    {
      manual: true,
      onSuccess: (data, currentPage) => {
        setDataSource(data.data);
        setTotal(data.total);
        setPageNum(currentPage);
      },
    },
  );

  const formItems = [
    {
      label: "查询",
      name: "queryCondition",
    },
  ];
  const columns = [
    {
      title: "用户名称",
      dataIndex: "userName",
    },
    // {
    //   title: "用户账号",
    //   dataIndex: "userAccount",
    // },
    {
      title: "登录IP",
      dataIndex: "loginIp",
    },
    {
      title: "登录错误信息",
      dataIndex: "errorInfo",
    },
    {
      title: "登录时间",
      dataIndex: "loginTime",
    },
    {
      title: "登出时间",
      dataIndex: "logOutTime",
    },
  ];

  useEffect(() => {
    loadLogList(1);
  }, []);

  return (
    <STable
      formItems={formItems}
      columns={columns}
      dataSource={dataSource}
      form={form}
      onChange={(current) => {
        loadLogList(current);
      }}
      onSearch={() => {
        loadLogList(1, form.getFieldsValue());
      }}
      onReset={() => {
        loadLogList(1);
        form.resetFields();
      }}
      total={total}
      page={pageNum}
      loading={loading}
      residual={50}
    >
      {/*<div className={"pb-8"} style={{ display: "flex", justifyContent: "flex-end" }}>*/}
      {/*  <SButton type={"primary"}>新增</SButton>*/}
      {/*</div>*/}
    </STable>
  );
}
